<template>
    <div>
        <el-container>

            <el-header>
                <div class="title">
                    Cpfbutoutu代码自动生成器
                </div>

            </el-header>

            <div class="demo-block">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm"
                         label-position="right" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="数据库名称" prop="dataSource">
                        <el-input v-model="ruleForm.dataSource"></el-input>
                    </el-form-item>
                    <el-form-item label="数据库密码" prop="password">
                        <el-input v-model="ruleForm.password"></el-input>
                    </el-form-item>

                    <el-form-item label="要创建的表名" prop="tableName">
                        <el-input v-model="ruleForm.tableName"></el-input>
                    </el-form-item>
                    <el-form-item label="是否创建Java" prop="isGenerateJava">
                        <el-radio v-model="ruleForm.isGenerateJava" label=true>是</el-radio>
                        <el-radio v-model="ruleForm.isGenerateJava" label='false'>否</el-radio>
                    </el-form-item>
                    <el-form-item label="是否创建菜单" prop="isGenerateMenu">
                        <el-radio v-model="ruleForm.isGenerateMenu" label=true>是</el-radio>
                        <el-radio v-model="ruleForm.isGenerateMenu" label=false>否</el-radio>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="modelName" v-show="this.ruleForm.isGenerateMenu==='true'">
                        <el-input  v-model="ruleForm.modelName"></el-input>
                    </el-form-item>
                    <el-form-item label="是否创建Vue" prop="isGenerateVue">
                        <el-radio v-model="ruleForm.isGenerateVue" label=true>是</el-radio>
                        <el-radio v-model="ruleForm.isGenerateVue" label=false>否</el-radio>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </el-container>

    </div>

</template>
<script>
    export default {
        name: 'demo',
        data() {
            return {
                ruleForm: {
                    dataSource: '',
                    password: '',
                    modelName: '',
                    tableName: '',
                    isGenerateJava: 'true',
                    isGenerateMenu: 'true',
                    isGenerateVue: 'true',
                },
                rules: {
                    dataSource: [
                        {required: true, message: '请输入数据库名称', trigger: 'blur', type: 'string'}
                    ],
                    password: [
                        {required: true, message: '请输入数据库密码', trigger: 'blur', type: 'string'}
                    ],
                    modelName: [
                        {required: true, message: '请输入要创建的菜单名称', trigger: 'blur', type: 'string'}
                    ],
                    tableName: [
                        {required: true, message: '请输入要创建的表名', trigger: 'blur', type: 'string'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                if (this.ruleForm.isGenerateMenu === 'false') {
                    this.rules.modelName = []
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.request.post('/code/generator', this.ruleForm).then(res => {
                            if (res.code === 200) {
                                this.$message.success(res.message)
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style>
    .demo-ruleForm {
        width: 500px;
        /*border: solid 1px black;*/
        margin: 50px;
    }

    .demo-block {
        border: 1px solid #ebebeb;
        border-radius: 3px;
        transition: .2s;
    }

    .title {
        font-size: 40px;
        color: cornflowerblue;
        margin: 10px 0;
    }
</style>